<template>
	<view class="login-container">
		<uv-form ref="login_form_ref" :model="loginForm" :rules="loginRules" class="login-form" labelPosition="left">
			<view class="title-container">
				<h3 class="title">安心火眼合规平台</h3>
			</view>
			<uv-form-item prop="account">
				<uv-input v-model.trim="loginForm.account" labelWidth="80rpx" placeholder="请输入账号" prefixIcon="account"
					prefixIconStyle="font-size: 22px;color: #909399">
				</uv-input>
			</uv-form-item>
			<uv-form-item prop="password">
				<uv-input prefixIcon="eye-off-outline" @keyup.enter="handleLogin" v-model.trim="loginForm.password"
					type="password" labelWidth="80rpx" prefixIconStyle="font-size: 22px;color: #909399"
					placeholder="请输入密码">
				</uv-input>
			</uv-form-item>
			<uv-button :loading="loading" type="primary" block round native-type="submit" class="login-button"
				@click="handleLogin">
				登 录
			</uv-button>
			
		</uv-form>
	</view>
</template>

<script setup>
	import { useUserStore } from '@/store/index.js'
	const login_form_ref = ref(null)
	const loginForm = reactive({
		account: '',
		password: '',
	})
	const loginRules = ref({
		account: [{
			required: true,
			trigger: ['blur','change'],
			message: '账号不能为空'
		}],
		password: [{
			required: true,
			trigger: ['blur','change'],
			message: '密码不能为空'
		}]
	})
	let loading = ref(false)
	let passwordType = ref('password')
	const userStore = useUserStore()
	const handleLogin = () => {
		login_form_ref.value.validate().then(res => {
			userStore.login(loginForm).then((res)=>{
				console.log('登录成功');
			})
		}).catch(errors => {

		})
	}
	const handleLogin1 = () => {
		userStore.getUserInfo()
	}
</script>

<style lang="scss" scoped>
	$bg: #2d3a4b;
	$light_gray: #eee;

	.login-container {
		height: 100vh;
		width: 100vw;
		background-color: $bg;
		overflow: hidden;

		.login-form {
			max-width: 100%;
			padding: 160rpx 35rpx 0;
			margin: 0 auto;
		}

		.login-button {
			width: 100%;
			margin-bottom: 20px;
			font-size: 16px;
			margin-top: 50px;
		}

		.title-container {
			position: relative;
			margin-bottom: 40px;

			.title {
				font-size: 26px;
				color: $light_gray;
				margin: 0 auto;
				text-align: center;
				font-weight: bold;
			}
		}

		::v-deep .uv-form-item__body__left__content__label {
			color: #fff;
		}

		::v-deep.uni-input-input {
			color: #fff;
		}
	}
</style>